<!DOCTYPE html>
<html>
<head>
    <title>冠者体育</title>
    <meta charset="utf8"/>
    <link href="<?php echo Yii::app()->request->baseUrl.'/css/bootstrap-3.2.0/css/bootstrap.min.css';?>" rel="stylesheet" type="text/css"/>
    <script src="<?php echo Yii::app()->request->baseUrl.'/css/bootstrap-3.2.0/js/jquery-1.11.1.min.js';?>" type="text/javascript"></script>
    <script src="<?php echo Yii::app()->request->baseUrl.'/css/bootstrap-3.2.0/js/bootstrap.min.js';?>" type="text/javascript"></script>
    <style>
        body {background-color: #EAEAEA;}
        li {list-style: none;}
        #header {width: 100%;height: 228px;background-image: url(<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/niaochao.png';?>);background-size: 100% 100%;}
        
        #content {width: 100%;text-align: center;}
        ul.menu {width: 100%;padding: 0;}
        ul.menu li {float: left;width: 33%;}
        
        ul.item {width: 100%;padding: 0;}
        ul.item li {float: none;width: 100%;}
        ul.item li:first-child {height: 90px;vertical-align: middle;line-height: 90px;}
        ul.item li:last-child {height: 50px;vertical-align: middle;line-height: 50px;font-size: 20px;}
        ul.item li img.bubble {width: 50px;height: 50px;}
        
        .choose {width: 25px;height: 25px;margin: 0 auto;overflow: hidden;}
        .choose img {position: relative;}
        
        #footer {padding-top:10px; width: 100%;height: 67px;background-image: url(<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/whiteFlow.png';?>);background-size: 100% 100%;bottom: 0;}
        .contact {width: 100%;padding-left: 20px;margin-top: 30px;}
        .contact li {float: left;width: 50%;}
    </style>
    <script>
        $(document).ready(function() {
            //按钮切换的js
            $("ul.menu").children("li").click(function() {
                $(this).find("img.bubble").animate({"width":"60px","height":"60px"},"fast");
                $(this).find("div.choose").children("img").css({"left":"-25px"});
                $(".active").removeClass("active");
                $(this).find(".link").addClass("active");
                $(this).siblings().find("img.bubble").css({"width":"50px","height":"50px"});
                $(this).siblings().find("div.choose").children("img").css({"left":"0px"});
            });

        });
        function jumpToPage() {
            var pageUrl = $(".active").attr("goPage");
            //alert(pageUrl);
            jQuery.ajax({
                'type':'POST',
                'url':pageUrl,
                'beforeSend':function(){$("#ajax-loaderdiv").show();},
                'complete':function(){$("#ajax-loaderdiv").hide();},
                'cache':false,'data':jQuery(this).parents("form").serialize(),
                'success':function(html){jQuery("#show_page_content").html(html)}
                });
            return false;
        }
    </script>
</head>
<body>
    <div id="header">
    </div>
    <div id="content">
        <ul class="menu">
            <li>
                <ul class="item">
                    <li><img class="bubble" src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/round1.png';?>"/></li>
                    <li><div class="choose"><img src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/switch.png';?>"/></div></li>
                    <li class="link" goPage="<?php echo $control->getAjaxLinkUrl('news', null, array('viewName' => 'news'));?>">
                        <span>赛事发布</span>
                    </li>
                </ul>
            </li>
            <li>
                <ul class="item">
                    <li><img class="bubble" src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/round2.png';?>" style="width: 60px;height: 60px"/></li>
                    <li><div class="choose"><img src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/switch.png';?>" style="left: -25px;"/></div></li>
                    <li class="link active" goPage="<?php echo $control->getAjaxLinkUrl('introduce', null, array('viewName' => 'introduce'));?>">
                        <span>介绍</span>
                    </li>
                </ul>
            </li>
            <li>
                <ul class="item">
                    <li><img class="bubble" src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/round3.png';?>"/></li>
                    <li><div class="choose"><img src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/switch.png';?>"/></div></li>
                    <li class="link" goPage="<?php echo $control->getAjaxLinkUrl('honour', null, array('viewName' => 'honour'));?>">
                        <span>荣誉墙</span>
                    </li>
                </ul>
            </li>
        </ul>
        <p id="enter" style="clear: both;padding-top: 20px;">
            <a href="#" onclick="jumpToPage()"><img src="<?php echo Yii::app()->request->baseUrl.'/images/BWeEvent/go.png';?>"/></a>
        </p>
    </div>
    <div id="footer">
        <ul class="contact">
            <li>联系电话：</li>
            <li>地址：</li>
        </ul>
    </div>
</body>
</html>
